<template>
  <!-- 注册页面 -->
  <div class="register_styl">
    <div class="register_top">
      <div>
        <img @click="$router.push('/')" class="img_styl" src="@/assets/images/fronLogo.png" alt="" srcset="" />
        <img class="img_styl1" src="@/assets/images/login_title.png" alt="" srcset="" />
      </div>
      <div class="register_title">欢迎来到振华石油商城！</div>
    </div>
    <div class="register_bottom">
      <div class="register_input">
        <div class="register_name">用户注册</div>
        <Form ref="formEle" :footer-hide="true" :model="registerForm" :rules="ruleValidate" style="margin: 0 40px">
          <FormItem label="用户名称" prop="userName">
            <Input v-model="registerForm.userName" type="text" placeholder="用户名称 * 不可修改">
            <Icon type="ios-contact" slot="prefix" />
            </Input>
          </FormItem>
          <FormItem label="用户密码" prop="password">
            <Input v-model="registerForm.password"  type="password" password  placeholder="请输入用户密码">
            <Icon type="md-lock" slot="prefix" />
            </Input>
          </FormItem>
          <FormItem label="重复密码" prop="repassword">
            <Input v-model="registerForm.repassword"  type="password" password  placeholder="请输入重复密码">
            <Icon type="md-lock" slot="prefix" />
            </Input>
          </FormItem>
          <FormItem label="手机号码" prop="phone">
            <Input v-model="registerForm.phone" type="text" placeholder="请输入手机号码">
            <Icon type="ios-call" slot="prefix" />
            </Input>
          </FormItem>
          <FormItem label="短信验证码" prop="smsCode">
            <Input v-model="registerForm.smsCode" type="text" placeholder="请输入验证码">
            <Icon type="md-phone-portrait" slot="prefix" />
            </Input>
            <div class="code_btn" @click="getCodeFun()">
              {{ codeNum }}
              <Spin fix v-if="spinShow">
                <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
              </Spin>
            </div>
          </FormItem>
        </Form>
        <div class="remember_styl">
          <Checkbox v-model="agree"><a @click="$refs.RegisterAgreement.openFun()">我已阅读并同意《振华石化商城注册协议》</a></Checkbox>
        </div>
        <div class="btn_styl" @click="submitFun()">
          立即注册
          <Spin fix v-if="buttonLoading">
            <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
          </Spin>
        </div>
        <div class="bottom_tip">
          已有账号？ <a @click="toPageFun('/login')">去登录</a>
        </div>
      </div>
    </div>
    <RegisterAgreement ref="RegisterAgreement" @success="agree = true"></RegisterAgreement>
  </div>
</template>

<script>
import RegisterAgreement from './Register-Agreement.vue'

export default {
  components: { RegisterAgreement },
  data() {
    return {
      codeNum: '获取验证码',
      registerForm: {},
      agree: false,
      spinShow: false,
      buttonLoading: false,
      ruleValidate: {
        userName: [
          {
            required: true,
            message: '请输入用户名称',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'password'
          }
        ],
        repassword: [
          {
            required: true,
            message: '请输入重复密码',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }
        ],
        smsCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    // 提交注册信息
    submitFun() {
      if (this.registerForm.password != this.registerForm.repassword) {
        this.$Message.error('请输入两遍相同的密码!')
        return
      }
      if (!this.agree) {
        this.$Message.error('请勾选注册协议!')
        return
      }
      this.buttonLoading = true
      this.$refs.formEle.validate((valid) => {
        if (valid) {
          let data = {
            ...this.registerForm,
            realName: this.registerForm.userName,
            typeSaleSell: '1',
            type:'0'
          }
          this.httpPost(this.API.API_customerAdd, data)
            .then((res) => {
              this.modalShow = false
              this.$Message.success('注册成功!')
              this.$router.push('/login')
              this.buttonLoading = false
            })
            .catch((err) => {
              this.buttonLoading = false
              console.error(err)
            })
        } else {
          this.buttonLoading = false
          this.$Message.error('请输入必填信息!')
        }
      })
    },
    //获取验证码
    getCodeFun(val) {
      let data = {}
      if (this.codeNum != '获取验证码') {
        this.$Message.error('请不要重复点击按钮!')
        return
      }
      if (!this.registerForm.phone) {
        this.$Message.error('请输入手机号码')
        return
      }
      data = {
        phone: this.registerForm.phone,
        status: 1
      }
      this.spinShow = true
      this.httpGet(this.API.API_sendCodePay, data)
        .then((res) => {
          //验证码倒计时
          this.countdownFun()
          this.spinShow = false
        })
        .catch((err) => {
          this.spinShow = false
          console.error(err)
        })
    },
    // 验证码倒计时
    countdownFun() {
      // 验证码倒计时
      this.codeNum = 60
      this.timer = setInterval(() => {
        this.codeNum--

        if (this.codeNum <= 0) {
          this.codeNum = '获取验证码'
          clearInterval(this.timer)
        }
      }, 1000)
    },
    toPageFun(path) {
      this.$router.push('/login')
    },
    clickNoticeFun(item) {
      this.$router.push({
        path: '/notice/notice-detail',
        query: {
          id: 110
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/styles/main.less';
@deep: ~'>>>';

.code_btn {
  width: 86px;
  height: 24px;
  border-radius: 4px;
  position: absolute;
  right: 6px;
  top: 40px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  background-color: #323f54;
  color: #ffffff;
  cursor: pointer;
}

.ivu-form-item {
  margin-bottom: 10px;
}

.ivu-form {
  width: 540px;
}

// 加载动画
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.register_styl {
  .flex-y();
  height: 100vh;
  min-width: 1200px;

  .register_top {
    background-image: url('~@/assets/images/login_back.png');
    .flex-x();
    width: 100%;
    height: 108px;
    padding: 0 380px;
    border-bottom: 2px solid @themeColor;
    background-color: #ffffff;

    .img_styl {
      margin-right: 38px;
      height: 80px;
      cursor: pointer;
    }

    .img_styl1 {}

    .register_title {
      flex-shrink: 0;
      font-size: 16px;
    }
  }

  .register_bottom {
    background-image: url('~@/assets/images/login_bottom.png');
    .flex-x(center);
    width: 100%;
    height: 100%;

    .register_input {
      position: relative;
      .flex-y(flex-start);
      width: 1000px;
      height: 662px;
      background-color: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);

      .register_name {
        margin: 20px 0 32px 0;
        font-size: 24px;
        color: @themeColor;
      }

      .account_styl {
        position: relative;
        width: 542px;
        margin-bottom: 16px;

        .account_font {
          margin-bottom: 4px;
          text-align: left;
        }
      }

      .remember_styl {
        width: 542px;
        margin: 20px 0 30px 0;
        text-align: left;
      }

      .btn_styl {
        position: relative;
        .solid-btn(392px, 36px, 4px, @themeColor);
      }

      .bottom_tip {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 53px;
        line-height: 53px;
        font-size: 12px;
        background-color: #f8f9fd;
      }
    }
  }
}
</style>
